<template>
  <view>
    <view class="login-form-wrap">
      <view class="title">
        欢迎登录
      </view>
      <view style="height: 300rpx;" />
      <view class="dropdown-wrapper">
        <u-dropdown class="flex-1">
          <u-dropdown-item v-model="value1" title="请选择数据中心" :options="options1" />
        </u-dropdown>
      </view>
      <view class="u-border-bottom my-40rpx flex">
        <input v-model="tel" class="flex-1" type="number" placeholder="请输入账号">
      </view>

      <view class="u-border-bottom my-40rpx flex">
        <input v-model="code" class="flex-1" type="passsword" mode placeholder="请输入密码" password="true">
      </view>

      <button class="login-btn" :style="[inputStyle]" @tap="submit">
        登录 <text class="i-mdi-login" />
      </button>

      <view class="alternative">
        <view class="password">
          密码登录
        </view>
        <view class="issue flex items-center">
          遇到问题?
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import uCode from 'uview-plus/components/u-code/u-code.vue';
// import {  } from '@/utils/auth';
import { computed, ref } from 'vue';
import type { CSSProperties } from 'vue';
import { setToken } from '@/utils/auth';
// const dataCenter = ref<string>('');
const tel = ref<string>('');
const code = ref<string>('');
// const tips = ref<string>();
// const uCodeRef = ref<InstanceType<typeof uCode> | null>(null);

const value1 = ref(1);
const options1 = ref([
  { label: '默认排序', value: 1 },
  { label: '距离优先', value: 2 },
  { label: '价格优先', value: 3 },
]);

const inputStyle = computed<CSSProperties>(() => {
  const style = {} as CSSProperties;
  if (tel.value && code.value) {
    style.color = '#fff';
    style.backgroundColor = uni.$u.color.warning;
  }
  return style;
});

async function submit() {
  if (!tel.value) {
    uni.$u.toast('请输入账号');
    return;
  }
  if (!code.value) {
    uni.$u.toast('请输入密码');
    return;
  }
  setToken('1234567890');
  uni.reLaunch({ url: '/pages/common/home/index' });
}
</script>

<style lang="scss" scoped>
.login-form-wrap {
  @apply mt-80rpx mx-auto mb-0 w-600rpx;

  .title {
    @apply mb-100rpx text-60rpx text-left font-500;
  }

  input {
    @apply pb-6rpx mb-10rpx text-left;
  }

  .login-btn {
    @apply flex items-center justify-center py-12rpx px-0 text-30rpx bg-#fdf3d0 border-none;

    color: $u-tips-color;

    &::after {
      @apply border-none;
    }
  }

  .alternative {
    @apply flex justify-between mt-30rpx;

    color: $u-tips-color;
  }
}

.dropdown-wrapper {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 40rpx;
  border-bottom: none;
}

.my-40rpx {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-1 {
  flex: 1;
}
</style>
